<template>
  <div class="myOrder">
    <!-- 我的咨询列表 -->
    <el-card class="box-card">
      <!-- 搜索栏 -->
      <div class="right">
        <el-form :model="queryParam" ref="queryParam" inline>
          <el-form-item label="状态:" label-width="50px" prop="status">
            <el-select v-model="queryParam.status" placeholder="请选择状态" clearable>
              <el-option v-for="(key,value) in statusList" :key="value" :label="key" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">搜索</el-button>
            <el-button @click="resetForm('queryParam')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="boxcard-body">
        <div class="tableList">
          <label>当前排名:{{orderSort}}</label>
          <el-table :data="list" border style="width: 100%">
            <el-table-column type="index" label="排序" width="50"></el-table-column>
            <el-table-column prop="customerName" label="客户名字" width="130" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="doctorName" label="医生名称" width="130" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="状态" width="130" show-overflow-tooltip>
              <template slot-scope="scope">{{ statusList[scope.row.status] }}</template>
            </el-table-column>
            <el-table-column prop="isReplay" label="医生是否已回复" width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <label v-if="scope.row.isReplay">是</label>
                <label v-if="!scope.row.isReplay" style="color:#F56C6C">否</label>
                </template>
            </el-table-column>
            <el-table-column
              prop="doctorUnReadCount"
              label="医生未读消息数"
              width="130"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="customerUnReadCount"
              label="客户未读消息数"
              width="130"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="outTradeNo" label="订单编号" width="150" show-overflow-tooltip></el-table-column>

            <el-table-column prop="payTime" label="支付时间" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="commentType" label="评价等级" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="comment" label="评价内容" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="commentTime" label="评价时间" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fee" label="支付费用" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="lastMessage" label="聊天的最新的内容" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="questionText" label="客户问题" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="isReplay" label="医生是否已回复" width="130" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.isReplay ? '是' : '否' }}</template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button @click="dialogField(scope.row)" type="text" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="pageChange"
              :total="total"
              :current-page.sync="pageNum"
              :page-sizes="[10, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-card>
    <div class="dialog">
      <el-dialog :title="dialog.title" :visible.sync="dialog.visible" v-if="cusDocDetail">
        <el-row>
          <el-col :span="2">
            <div>医生头像:</div>
          </el-col>
          <el-col :span="6">
            <img :src="cusDocDetail.imageUrl" width="50px" height="50px" />
          </el-col>
          <el-col :span="8">
            <div>医生名字: {{ cusDocDetail.name }}</div>
          </el-col>
          <el-col :span="8">
            <div>订单状态: {{ statusList[cusDocDetail.status] }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div>医院: {{ cusDocDetail.hospitial }}</div>
          </el-col>
          <el-col :span="6">
            <div>职务: {{ cusDocDetail.post }}</div>
          </el-col>
          <el-col :span="6">
            <div>科室: {{ cusDocDetail.department }}</div>
          </el-col>
          <el-col :span="6">
            <div>擅长科目: {{ cusDocDetail.subjects }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>介绍: {{ cusDocDetail.memo }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div>客户问题: {{ cusDocDetail.questionText }}</div>
          </el-col>
          <el-col :span="8">
            <div>咨询科目: {{ cusDocDetail.subject }}</div>
          </el-col>
          <el-col :span="8">
            <div>医生是否回复: {{ cusDocDetail.isReplay ? '是' : '否' }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="display: flex;align-items: center;">
              <div style="display: inline-block;">图片:</div>
              <div
                v-for="item in cusDocDetail.imageUrls"
                :key="item"
                style="display: inline-block;"
              >
                <el-image :src="item" style="margin: 30px;width:120px;height:60px" :preview-src-list="[item]" :key="item" />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <video v-if="cusDocDetail.videoUrl" width="400px" height="200px" :src="cusDocDetail.videoUrl" controls="controls"></video>
            </div>
          </el-col>
        </el-row>
        <webchat
          :orderId="orderId"
          :username="customerName"
          :messages="cusDocDetail.consultDTOs"
          @getMessages="getMessages"
        ></webchat>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import webchat from "@/components/common/webchat.vue";
export default {
  components: {
    webchat
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      queryParam: { status: null },
      // 数据字典
      statusList: {
        1: "待支付",
        2: "已支付",
        3: "已关闭",
        4: "提问达最大次数",
        5: "已取消",
        6: "医生未回复自动退款"
      },
      dialog: {
        title: "咨询详情",
        visible: false
      },
      orderId: 0,
      cusDocDetail: null,
      customerName: "",
      orderSort:null
    };
  },
  created() {
    this.getList(this.pageNum, this.pageSize);
    this.getOrderSort();
  },
  watch: {},
  methods: {
    getMessages() {
      this.$https
        .get("/doctorConsult/getCustomerDoctorDetail", { id: this.orderId })
        .then(res => {
          this.cusDocDetail = res.data.data;
        });
    },
    getOrderSort() {
      this.$https
        .get("/doctorRole/orderSort", { })
        .then(res => {
          this.orderSort = res.data.data+1;
        });
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      this.$https
        .get("/doctorRole/pageDoctorConsult", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.queryParam.status
        })
        .then(res => {
          this.list = res.data.data.list;
          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
    },
    dialogField(row) {
      this.dialog.visible = true;
      this.orderId = row.id;
      this.customerName = row.customerName;
      this.getMessages();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="less"></style>
